<%--
  Created by IntelliJ IDEA.
  User: Tsuki
  Date: 2023-07-17
  Time: 21:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://wego.com/format" prefix="f" %>
<%@ page import="com.wego.constant.WeGoConstant" %>
<html>
<head>
    <title>我的订单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/css.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/fontawesome/css/all.css" media="all">
    <style>
        body {
            background: rgb(234, 232, 235);
        }

        .mainContainer {
            margin-top: 5vh;
            margin-left: 11vw;

            width: 78vw;
            background: white;
            border: 1px solid #f2f2f2;
            border-radius: 10px;
            padding: 10px;
        }

        .centerContainer {
            margin-top: 1%;
            width: 100%;
        }

        .layui-card {
            border: 1px solid #f2f2f2;
            border-radius: 5px;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .layuimini-qiuck-module {
            text-align: center;
            margin-top: 10px
        }

        .layuimini-qiuck-module a i {
            display: inline-block;
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border-radius: 2px;
            font-size: 30px;
            background-color: #F8F8F8;
            color: #333;
            transition: all .3s;
            -webkit-transition: all .3s;
        }

        .layuimini-qiuck-module a cite {
            position: relative;
            top: 2px;
            display: block;
            color: #666;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
        }

        .main_btn > p {
            height: 40px;
        }

        .goodsCard {
            width: 100%;
            height: 160px;
            border-radius: 5px;
            background: rgb(247, 249, 250);
            position: relative;
        }


        .goodsPic {
            padding-left: 15px;
            max-width: 360px;
            max-height: 360px;
            min-width: 360px;
            min-height: 360px;
        }

        .goodsContainer {
            padding: 10px;
        }

        .goodsText {
            font-family: "黑体", Times, serif;
            font-size: 20px;
            font-weight: bold;
            color: rgba(102, 102, 102);
        }

        .goodsInfo {
            margin-top: 10px;
            font-size: 1.1em;
        }

        .goodsPrice {
            color: red;
            font-size: 2em;
            margin-top: 50%;
        }
    </style>
</head>
<body>
<div id="target-test" style="position: relative; ">
    <div class="layuimini-container">
        <div class="layuimini-main">
            <!-- 头部 -->
            <div class="layui-row">
                <jsp:include page="../common/_top.jsp"></jsp:include>
            </div>
            <div class="mainContainer">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li>所有订单
                            <c:if test="${orderCount!=0}"><span class="layui-badge">${orderCount}</span></c:if></li>
                        <li>已下单|未付款<c:if test="${unpaidCount!=0}"><span
                                class="layui-badge">${unpaidCount}</span></c:if></li>
                        <li>已付款<c:if test="${unshippedCount!=0}"><span
                                class="layui-badge">${unshippedCount}</span></c:if></li>
                        <li>已发货<c:if test="${unreceivedCount!=0}"><span
                                class="layui-badge">${unreceivedCount}</span></c:if></li>
                        <li>已签收<c:if test="${unevaluatedCount!=0}"><span
                                class="layui-badge">${unevaluatedCount}</span></c:if></li>
                        <li>已评价<c:if test="${stagingCount!=0}"><span
                                class="layui-badge">${stagingCount}</span></c:if></li>
                    </ul>

                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>订单号</th>
                                    <th>商品总数</th>
                                    <th>订单金额</th>
                                    <th>支付方式</th>
                                    <th>下单时间</th>
                                    <th>详情</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${orderList}" var="order" varStatus="status">
                                    <tr>
                                        <td>${status.index + 1}</td>
                                        <td>${order.id}</td>
                                        <td>${order.amount}</td>
                                        <td>${order.money}</td>
                                        <td>支付宝</td>
                                        <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                        <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>

                        <div class="layui-tab-item">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>订单号</th>
                                    <th>商品总数</th>
                                    <th>待付款金额</th>
                                    <th>支付方式</th>
                                    <th>下单时间</th>
                                    <th>详情</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${orderList}" var="order" varStatus="status">
                                    <c:if test="${order.state==1}">
                                        <tr>
                                            <td>${status.index + 1}</td>
                                            <td>${order.id}</td>
                                            <td>${order.amount}</td>
                                            <td>${order.money}</td>
                                            <td>支付宝</td>
                                            <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                            <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                            <td><a>去付款</a></td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>订单号</th>
                                    <th>商品总数</th>
                                    <th>待付款金额</th>
                                    <th>支付方式</th>
                                    <th>下单时间</th>
                                    <th>详情</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${orderList}" var="order" varStatus="status">
                                    <c:if test="${order.state==2}">
                                        <tr>
                                            <td>${status.index + 1}</td>
                                            <td>${order.id}</td>
                                            <td>${order.amount}</td>
                                            <td>${order.money}</td>
                                            <td>支付宝</td>
                                            <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                            <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table" lay-skin="line">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>订单号</th>
                                    <th>商品总数</th>
                                    <th>待付款金额</th>
                                    <th>支付方式</th>
                                    <th>下单时间</th>
                                    <th>详情</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${orderList}" var="order" varStatus="status">
                                    <c:if test="${order.state==3}">
                                        <tr>
                                            <td>${status.index + 1}</td>
                                            <td>${order.id}</td>
                                            <td>${order.amount}</td>
                                            <td>${order.money}</td>
                                            <td>支付宝</td>
                                            <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                            <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                            <td><a onclick="tracking(${order.id})">查看物流</a></td>
                                        </tr>
                                    </c:if>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-tab-item"><table class="layui-table" lay-skin="line">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>订单号</th>
                                <th>商品总数</th>
                                <th>待付款金额</th>
                                <th>支付方式</th>
                                <th>下单时间</th>
                                <th>详情</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${orderList}" var="order" varStatus="status">
                                <c:if test="${order.state==4}">
                                    <tr>
                                        <td>${status.index + 1}</td>
                                        <td>${order.id}</td>
                                        <td>${order.amount}</td>
                                        <td>${order.money}</td>
                                        <td>支付宝</td>
                                        <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                        <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                        <td><a>去评价</a></td>
                                    </tr>
                                </c:if>
                            </c:forEach>
                            </tbody>
                        </table></div>
                        <div class="layui-tab-item"><table class="layui-table" lay-skin="line">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>订单号</th>
                                <th>商品总数</th>
                                <th>待付款金额</th>
                                <th>支付方式</th>
                                <th>下单时间</th>
                                <th>详情</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${orderList}" var="order" varStatus="status">
                                <c:if test="${order.state==5}">
                                    <tr>
                                        <td>${status.index + 1}</td>
                                        <td>${order.id}</td>
                                        <td>支付宝</td>
                                        <td>${order.amount}</td>
                                        <td>${order.money}</td>
                                        <td>${f:formatLocalDateTime(order.createTime, 'yyyy-MM-dd HH:mm:ss')}</td>
                                        <td><a onclick="details(${order.id})">查看订单详情</a></td>
                                        <td><a>追评</a></td>
                                    </tr>
                                </c:if>
                            </c:forEach>
                            </tbody>
                        </table></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    function details(e) {
        var index = layer.open({
            title: '',
            type: 2,
            shade: 0.2,
            title: false, // 不显示标题栏
            shadeClose: true,
            offset: '20px',
            area:['80%', '80%'],
            content: '${pageContext.request.contextPath}/manager/order_item/details?orderId=' + e,
        });
    }
    function tracking(e) {
        var index = layer.open({
            title: '',
            type: 2,
            shade: 0.2,
            title: false, // 不显示标题栏
            shadeClose: true,
            offset: '20px',
            area:['80%', '80%'],
            content: '${pageContext.request.contextPath}/manager/order/tracking?orderId=' + e,
        });
    }
</script>
</body>
</html>
